<template>
	<div class="page">
		<p class="title">基本用法</p>
		<gr-uploader v-model="filelist1"/>
		
		<p class="title">限制上传数量（4个）</p>
		<gr-uploader v-model="filelist2" max-size="4"/>
		
		<p class="title">只读模式</p>
		<gr-uploader v-model="filelist3" readonly/>
		
		<p class="title">添加标签</p>
		<gr-uploader v-model="filelist4"/>
		
		<p class="title">loading状态</p>
		<gr-uploader v-model="filelist5"/>
		
		<p class="title">单次多选文件</p>
		<gr-uploader v-model="filelist6" multiple/>
		
		<p class="title">修改默认尺寸</p>
		<gr-uploader v-model="filelist1" width="150px" height="100px"/>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				filelist1: [{
					url: require('../../assets/mme.jpg')
				}, {
					url: require('../../assets/dog.jpg')
				}],
				filelist2: [{
					url: require('../../assets/mme.jpg')
				}, {
					url: require('../../assets/dog.jpg')
				}, {
					url: require('../../assets/mme.jpg')
				}],
				filelist3: [{
					url: require('../../assets/mme.jpg')
				}, {
					url: require('../../assets/dog.jpg')
				}, {
					url: require('../../assets/mme.jpg')
				}],
				filelist4: [{
					label: '默认头像',
					url: require('../../assets/mme.jpg')
				}, {
					url: require('../../assets/dog.jpg')
				}, {
					url: require('../../assets/mme.jpg')
				}],
				filelist5: [{
					status:'uploading',
					url: require('../../assets/mme.jpg')
				}, {
					status:'failed',
					url: require('../../assets/dog.jpg')
				}],
				filelist6: []
			}
		},
		methods: {
			fileReaded(file) {
				console.log(11111111);
				console.log(file); //增加multiple属性后，file为数组结构，1到多个文件
			}
		}
	}
</script>

<style lang="scss">
	html {
		background-color: white;
		.page {
			padding: 15px;
		}
	}
</style>
